<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        placeholder="应用名称"
        style="width: 200px; margin-right: 10px"
        class="filter-item"
        clearable
        @keyup.enter.native="event_query"
      />
      <el-select
        v-model="listQuery.state"
        placeholder="应用状态"
        clearable
        class="filter-item"
        style="width: 120px; margin-right: 10px"
      >
        <el-option
          v-for="item in state"
          :key="item.key"
          :label="item.msg"
          :value="item.index"
        />
      </el-select>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="event_query"
      >
        查询
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-circle-plus-outline"
        @click="event_add"
      >
        添加
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      stripe
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="应用ID" prop="id" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.aid }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="应用名称"
        width="150px"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{ row }">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="远程数据"
        min-width="150px"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{ row }">
          <span>
            {{ row.msg }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="绑定模式" width="95px" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="get_bin(row.bin).tag">
            <span>{{ get_bin(row.bin).msg }}</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="收费模式" width="95px" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="get_mold(row.mold).tag" effect="dark">
            <span>{{ get_mold(row.mold).msg }}</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="登录模式" width="95px" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="get_login(row.login).tag">
            <span>{{ get_login(row.login).msg }}</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        class-name="status-col"
        align="center"
        width="95"
      >
        <template slot-scope="{ row }">
          <el-switch
            :value="row.state == 1"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="event_sw_upState(row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="时间" width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.time | parseTime("{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="100"
        class-name="small-padding fixed-width"
        fixed="right"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="event_edit(row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="event_getAll"
    />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="应用名称" prop="name">
          <el-input v-model="temp.name" placeholder="请输入应用名称" />
        </el-form-item>
        <el-form-item label="登录策略" prop="state">
          <el-select
            v-model="temp.login"
            class="filter-item"
            placeholder="请选择登录策略"
          >
            <el-option
              v-for="item in login"
              :key="item.key"
              :label="item.msg"
              :value="item.index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="绑定策略" prop="bin">
          <el-select
            v-model="temp.bin"
            class="filter-item"
            placeholder="请选择绑定策略"
          >
            <el-option
              v-for="item in bin"
              :key="item.key"
              :label="item.msg"
              :value="item.index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="收费策略" prop="mold">
          <el-select
            v-model="temp.mold"
            class="filter-item"
            placeholder="请选择收费策略"
          >
            <el-option
              v-for="item in mold"
              :key="item.key"
              :label="item.msg"
              :value="item.index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="应用状态" prop="state">
          <el-select
            v-model="temp.state"
            class="filter-item"
            placeholder="请选择应用状态"
          >
            <el-option
              v-for="item in state"
              :key="item.key"
              :label="item.msg"
              :value="item.index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="远程数据">
          <el-input
            v-model="temp.msg"
            :autosize="{ minRows: 3, maxRows: 5 }"
            type="textarea"
            placeholder="可将关键信息放在此处,由应用联网动态获取"
          />
        </el-form-item>
      </el-form>
      <div style="margin-left: 50px">
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? createData() : updateData()"
        >
          确定
        </el-button>
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { getAll, Add, edit } from "@/network/apply.js";
import { Message } from "element-ui";
const enum_state = [
  { msg: "正常", tag: "success" },
  { msg: "停用", tag: "danger" },
];
const enum_login = [
  { msg: "无需登录", tag: "info" },
  { msg: "单点登录", tag: "success" },
  { msg: "多点登录", tag: "success" },
];
const enum_bin = [
  { msg: "不绑定", tag: "info" },
  { msg: "机器码", tag: "" },
  { msg: "服务器", tag: "" },
];
const enum_mold = [
  { msg: "扣时", tag: "" },
  { msg: "扣点", tag: "success" },
];
export default {
  name: "ComplexTable",
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      page: 1,
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 30,
        name: '',
        state: '',
      },
      state: [
        { index: 1, msg: "正常", key: "state_ok" },
        { index: 2, msg: "暂停", key: "state_no" },
      ],
      login: [
        { index: 1, msg: "无需登录", key: "login_no" },
        { index: 2, msg: "单点登录", key: "login_dan" },
        { index: 3, msg: "多点登录", key: "loign_duo" },
      ],
      bin: [
        { index: 1, msg: "不绑定", key: "bin_no" },
        { index: 2, msg: "绑定机器", key: "bin_dev" },
        { index: 3, msg: "绑定IP", key: "bin_ip" },
      ],
      mold: [
        { index: 1, msg: "扣时", key: "mold_day" },
        { index: 2, msg: "扣点", key: "mold_point" },
      ],
      statusOptions: ["published", "draft", "deleted"],
      showReviewer: false,
      temp: {
        aid: '',
        name: "",
        state: 1,
        login: 1,
        bin: 1,
        mold: 1,
        msg: "",
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "添加",
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {},
      downloadLoading: false,
    };
  },
  created() {
    this.event_getAll();
  },
  methods: {
    get_login(index) {
      if (index <= 0) {
        return "info";
      }
      return enum_login[index - 1];
    },
    get_state(index) {
      if (index <= 0) {
        return "info";
      }
      return enum_state[index - 1];
    },
    get_bin(index) {
      if (index <= 0) {
        return "info";
      }
      return enum_bin[index - 1];
    },
    get_mold(index) {
      if (index <= 0) {
        return "info";
      }
      return enum_mold[index - 1];
    },
    event_getAll() {
      //获取应用列表
      ////console.log(this.listQuery);
      if (this.listQuery.page > 1 && this.list.length < this.listQuery.limit) {
        this.listQuery.page = this.page;
        Message.error({
          message: "别点了已经没有了",
          duration: 1000,
          offset: 200,
        });
        return;
      }
      this.page = this.listQuery.page;
      this.listLoading = true;
      getAll(this.listQuery)
        .then((response) => {
          let res = response.data;
          if (res.code == 200) {
            this.list = res.data;
            this.total = res.count;
            Message.success({ message: res.msg, duration: 1000, offset: 200 });
          } else {
            Message.error({ message: res.msg, duration: 1000, offset: 200 });
          }
          this.listLoading = false;
        })
        .catch((error) => {
          Message.error({ message: "网络异常", offset: 200 });
          return false;
        });
    },
    event_query() {
      //查询事件
      this.listQuery.page = 1;
      this.event_getAll();
    },
    resetTemp() {
      this.temp = {
        aid: "",
        name: "",
        state: 1,
        login: 1,
        bin: 1,
        mold: 1,
        msg: "",
      };
    },
    event_add() {
      //添加事件
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    createData() {
      //添加
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        Add(this.temp)
          .then((response) => {
            let res = response.data;
            if (res.code == 200) {
              Message.success({
                message: res.msg,
                duration: 1000,
                offset: 200,
              });
              this.list.unshift(this.temp);
              this.dialogFormVisible = false;
            } else {
              Message.error({
                message: res.msg,
                duration: 1000,
                offset: 200,
              });
            }
            this.listLoading = false;
          })
          .catch((error) => {
            Message.error({ message: "网络异常", offset: 200 });
            return false;
          });
      });
    },
    event_edit(row) {
      //修改事件
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    updateData() {
      //修改应用
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        this.updata(this.temp, false);
      });
    },
    updata(data, isState, row) {
      edit(data)
        .then((response) => {
          let res = response.data;
          if (res.code == 200) {
            Message.success({ message: res.msg, duration: 1000, offset: 200 });
            if (isState) {
              row.state = data.state;
            } else {
              const index = this.list.findIndex((v) => v.aid === this.temp.aid);
              this.list.splice(index, 1, this.temp);
              this.dialogFormVisible = false;
            }
          } else {
            Message.error({ message: res.msg, duration: 1000, offset: 200 });
          }
        })
        .catch((error) => {
          //console.log(error);
          Message.error({ message: "网络异常", offset: 200 });
          return false;
        });
    },
    event_sw_upState(row) {
      let state = row.state == 1 ? 2 : 1;
      this.updata(
        {
          aid: row.aid,
          state: state,
          name: "",
          mold: "",
          bin: "",
          login: "",
          msg: "",
        },
        true,
        row
      );
    },
  },
};
</script>
